<template>
  <div>
    <div ref="svgContainer" class="svg-container"></div>
    <button @click="startDrawing">开始绘制多边形</button>

    <button @click="loadSVG">加载SVG文件</button>
    <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" />
    <button @click="undo">撤销</button>
    <button @click="redo">重绘</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { SVG, register } from '@svgdotjs/svg.js';
import '@svgdotjs/svg.draggable.js'
// import '@svgdotjs/svg.draw.js'
import '@svgdotjs/svg.draw.js'

const svgContainer = ref(null);
const fileInput = ref(null);
const draw = ref(null);
const polygons = ref([]);
const points = ref([]);
const history = ref([]);
let currentPolygon = [];
let isDragging = false;
let selectedPolygon = null;
// let isDrawing = false;
let isDrawingPoints = false;

let isDrawing = ref(false);

let polygonPoints = ref([]);  //当前绘制的点的集合

let shape_obj = ref([]); //多边形集合

onMounted(() => {
  draw.value = SVG().addTo(svgContainer.value).size('100%', '100%');


  var rect = draw.value.rect(100, 100)

  rect.draggable();



  let poly1 = draw.value.polygon().draw().attr('stroke-width', 1).attr('fill', 'red');

  poly1.draggable();

  // var poly1 = new SVG('polygon').size('100%', '100%').polygon().draw().attr('stroke-width', 1).attr('fill', 'none');

  poly1.on('drawstart', function (e) {
    // document.addEventListener('keydown', function (e) {
    //   console.log(e)
    //   if (e.keyCode == 13) {
    //     poly1.draw('done');
    //     poly1.off('drawstart');
    //   }
    // });

    document.addEventListener('contextmenu', function (e) {

      console.log('捕获到双击')
      poly1.draw('done');
      poly1.off('drawstart');

    
    });
  });

  poly1.on('drawstop', function () {
    // remove listener
  });

})


const startDrawing = () => {
  isDrawing.value = true;
  // isDrawingPoints = false;
  // currentPolygon = []; // 清空当前多边形
  // draw.value.clear(); // 清除画布
};

// const startDrawingPoints = () => {
//   isDrawingPoints = true;
//   isDrawing = false;
//   draw.value.clear(); // 清除画布
// };

const loadSVG = () => {
  fileInput.value.click();
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const content = e.target.result;
      draw.value.clear();
      draw.value.svg(content);
    };
    reader.readAsText(file);
  }
};

const undo = () => {
  if (history.value.length > 1) {
    history.value.pop();
    const lastState = history.value[history.value.length - 1];
    draw.value.clear();
    lastState.forEach((item) => {
      if (item.type === 'polygon') {
        draw.value.polygon(item.array()).fill('#f00').stroke({ color: '#000', width: 2 });
      } else if (item.type === 'circle') {
        draw.value.circle(5).fill('#000').move(item.cx(), item.cy());
      }
    });
    polygons.value = lastState.filter(item => item.type === 'polygon');
    points.value = lastState.filter(item => item.type === 'circle');
  }
};

const redo = () => {
  if (history.value.length > 0 && history.value.length < polygons.value.length + points.value.length + 1) {
    const nextState = history.value[history.value.length];
    draw.value.clear();
    nextState.forEach((item) => {
      if (item.type === 'polygon') {
        draw.value.polygon(item.array()).fill('#f00').stroke({ color: '#000', width: 2 });
      } else if (item.type === 'circle') {
        draw.value.circle(5).fill('#000').move(item.cx(), item.cy());
      }
    });
    polygons.value = nextState.filter(item => item.type === 'polygon');
    points.value = nextState.filter(item => item.type === 'circle');
  }
};
</script>

<style scoped>
.svg-container {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
}
</style>